<template>
	<view class="main">
		<view class="close" @click="back">
			<u-icon name="arrow-left" size="40"></u-icon>
		</view>

		<view class="main-bg flex flex-jc-c flex-ai-c">
			<!-- 通话中 -->
			<view id="myVideoPlayer" style="position: absolute;top: 0;left: 0;"></view>
			<!-- <video :src="`rtmp://192.168.1.156/lives/${gather.liveid}.flv`" ref="video1" autoplay class="video" id="myPlayer"></video> -->
			<scroll-view :scroll-into-view="gather.scrollToView" :scroll-with-animation="gather.scrollAnimation" scroll-y style="position: absolute;border: 1px solid rgba(255,255,255,0.3);z-index: 9;height: 500rpx;width: 60%;left: 0;bottom: 100rpx;">
				<view v-for="(item,index) in gather.messageList" :key="index" style="color: black;">
					<view :id="'ID'+index" class="flex flex-ai-c flex-wrap-w">
						<view style="margin: 10rpx 20rpx 10rpx 10rpx;">
							<image style="width: 50rpx;height: 50rpx;border-radius: 50%;" :src="item.handimg"></image>
						</view>
						<view>{{item.username}}：</view>
						<view>{{item.content}}</view>
					</view>
				</view>
			</scroll-view>
			<view class="flex flex-ai-c" style="width: 60%;;position: absolute;left: 0;bottom: 0;z-index: 10;background: rgba(255,255,255,0.3);height: 70rpx;">
				<input @confirm="send" v-model="gather.sendMsg" placeholder="发送信息" />
				<view style="height: 100%;line-height: 70rpx;padding: 0 10rpx;" @click="send">发送</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		inject,
		ref
	} from 'vue'
	import {
		onLoad, onUnload,onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	
	const store = useStore()
	let gather : any = reactive({
		sendMsg: '',
		userinfo: {},//接收者
		selfInfo: uni.getStorageSync('userinfo'),//自己的
		palyerType: 0,
		liveid: null,
		messageList: [],
		scrollAnimation: false,
		scrollToView: '',
	})
	const socket : any = inject("$socket");
	let player = null
	// @ts-ignore
	let url = ref(`${uni.$liveUrl}/lives/`)
	const back = () => {
		uni.navigateBack()
	}
	onUnload(() => {
		player.release(true)
	})
	onShow(() => {
		let info = {
			crowd_id: gather.liveid,
			userid: gather.selfInfo.userid,
			username: gather.selfInfo.username
		}
		socket.emit('live_join',info)
	})
	onLoad((props) => {
		gather.palyerType = JSON.parse(props.palyerType)
		gather.liveid = props.id || null
		gather.userinfo = store.state.chatUser
		//加入房间
		socket.on('live_join', (msg) => {
			console.log(msg,'jo')
		})
		//实时推送直播间消息内容
		socket.on('send_lives_msg', (data) => {
			gather.messageList = [...gather.messageList, data]
			
			setTimeout(() => {
				gather.scrollToView = 'ID' + (gather.messageList.length - 1)
				console.log(gather.scrollToView,'send')
			}, 100)
		})
		setTimeout(()=>{
			handelNodePlayer()
			
		},1000)
	})
	const send = () => {
		if (!gather.sendMsg) return
		sendConent({
			content: gather.sendMsg,
		})
	}
	const sendConent = (obj, type : number = 0) => {
		let info = {
			...obj,
			type: type, //0文字 1图片 2音频 3视频
			userid: gather.selfInfo.userid,	//自己
			username: gather.selfInfo.username,
			crowd_id: gather.liveid,//群id
			handimg: gather.selfInfo.handimg
		}
		socket.emit('send_lives_msg', info)
		gather.scrollAnimation = true
		gather.sendMsg = ''
	}
	const handelNodePlayer = () => {
		let cv = document.createElement("canvas")
		let myVideoPlayer = document.getElementById('myVideoPlayer')
		cv.id = "video"
		cv.style.cssText = "width: 100vw;height: 100vh;"
		myVideoPlayer.appendChild(cv)
		// @ts-ignore
		player = new NodePlayer();
		player.setView(cv.id);
		player.setBufferTime(500);
		player.setScaleMode(2);
		
		// @ts-ignore
		player.start(`${uni.$baseUrl}:100/lives/${gather.liveid}.flv`)
		
	}
	
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.video {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
	}

	.close {
		position: fixed;
		left: 20rpx;
		top: 20rpx;
		color: #fff;
		z-index: 2;
	}

	.main {
		width: 100%;
		height: 100%;

		.text {
			color: #fff;
			font-size: 30rpx;
		}

		&-bg {
			width: 100%;
			height: 100%;
			background: rgb(39, 40, 34);

		}

		.main-name {
			color: #fff;
		}

		.main-btn {
			width: 100%;
			position: fixed;
			bottom: 40rpx;
			padding: 0 50rpx;
			z-index: 999;
			color: #fff;

			.refuse {
				text-align: center;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: rgb(235, 69, 73);
			}

			.accept {
				text-align: center;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: rgb(2, 212, 3);
			}
		}
	}
</style>